<template>
  <div style="width: 100%; height: 100%; overflow: auto; padding: 20px">
    <el-descriptions
      :title="componentProps.title"
      :column="componentProps.column"
      :size="componentProps.size"
      :border="componentProps.border"
      :direction="componentProps.direction"
    >
      <el-descriptions-item
        v-for="(item, index) in currentItems"
        :key="index"
        :label="item.label"
        :span="item.span"
        :width="item.width"
        :min-width="item.minWidth"
        :align="item.align"
        :label-align="item.labelAlign"
        :class-name="item.className"
        :label-class-name="item.labelClassName"
      >
        {{ item.content }}
      </el-descriptions-item>
    </el-descriptions>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, watch } from 'vue';
import { ElDescriptions, ElDescriptionsItem } from 'element-plus';
import { useAutoDataBinding } from '@/composables/use-data-binding';
import { shouldUpdateChartData } from '@/utils/shallow-equal';
import type { IDataBindingConfig } from '@/components/mt-edit/store/types';

interface DescriptionItem {
  label: string;
  content: string;
  span?: number;
  width?: string | number;
  minWidth?: string | number;
  align?: 'left' | 'center' | 'right';
  labelAlign?: 'left' | 'center' | 'right';
  className?: string;
  labelClassName?: string;
}

const props = defineProps({
  // 数据绑定配置
  dataBinding: {
    type: Object as () => IDataBindingConfig,
    default: () => ({
      enabled: false,
      sourceId: '',
      dataPointId: '',
      targetProperty: 'items',
      transform: 'array',
      defaultValue: '[]',
      updateInterval: 0,
      updateMode: 'replace'
    })
  },
  title: {
    type: String,
    default: '用户信息'
  },
  column: {
    type: Number,
    default: 3
  },
  size: {
    type: String as () => 'large' | 'default' | 'small',
    default: 'default'
  },
  border: {
    type: Boolean,
    default: false
  },
  direction: {
    type: String as () => 'vertical' | 'horizontal',
    default: 'horizontal'
  },
  items: {
    type: Array as () => DescriptionItem[],
    default: () => [
      {
        label: '用户名',
        content: '张三'
      },
      {
        label: '手机号',
        content: '18100000000'
      },
      {
        label: '居住地',
        content: '北京市朝阳区'
      },
      {
        label: '备注',
        content: '这是一段很长的备注信息，用来测试描述列表的显示效果',
        span: 2
      },
      {
        label: '联系地址',
        content: '北京市朝阳区xxx大厦xxx层xxx室'
      }
    ]
  }
});

// 响应式属性对象（用于数据绑定）
const componentProps = ref({
  title: props.title,
  column: props.column,
  size: props.size,
  border: props.border,
  direction: props.direction,
  items: props.items
});

// 使用数据绑定（hide属性由render-core处理，组件跳过）
const shouldUseDataBinding =
  props.dataBinding && props.dataBinding.enabled && props.dataBinding.targetProperty !== 'hide';

const dataBinding = useAutoDataBinding(
  shouldUseDataBinding ? props.dataBinding : null,
  componentProps.value,
  (property: string, value: any) => {
    // 直接更新响应式对象的属性
    if (componentProps.value.hasOwnProperty(property)) {
      (componentProps.value as any)[property] = value;
    }
  }
);

// 监听props变化，同步到响应式属性对象
// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.title,
  (newValue, oldValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'title') {
      if (newValue !== oldValue) {
        componentProps.value.title = newValue;
      }
    }
  }
);

// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.column,
  (newValue, oldValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'column') {
      if (newValue !== oldValue) {
        componentProps.value.column = newValue;
      }
    }
  }
);

// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.size,
  (newValue, oldValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'size') {
      if (newValue !== oldValue) {
        componentProps.value.size = newValue;
      }
    }
  }
);

// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.border,
  (newValue, oldValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'border') {
      if (newValue !== oldValue) {
        componentProps.value.border = newValue;
      }
    }
  }
);

// 性能优化：基本类型属性添加相等性检查
watch(
  () => props.direction,
  (newValue, oldValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'direction') {
      if (newValue !== oldValue) {
        componentProps.value.direction = newValue;
      }
    }
  }
);

// 性能优化：使用浅比较检查数组数据变化，避免不必要的重新渲染
watch(
  () => props.items,
  (newValue, oldValue) => {
    if (!props.dataBinding?.enabled || props.dataBinding.targetProperty !== 'items') {
      if (shouldUpdateChartData(newValue, oldValue)) {
        componentProps.value.items = [...newValue];
      }
    }
  },
  { deep: false }
);

// 使用计算属性来获取当前的描述项数据
const currentItems = computed(() => {
  return componentProps.value.items;
});
</script>
